---
title: "Number Field"
description: A A set of radio buttons that allows users to select only one option from a predefined list.
order: 6
published: true
references: ["https://react-spectrum.adobe.com/react-aria/NumberField.html#props"]
---

## Basic

A field specifically designed for entering numeric values.
<How minW60 toUse="forms/number-field/number-field-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/number-field
```

## Composed components
<Composed components={['field']}/>

## Manual installation

```bash
npm i react-aria-components
```

<SourceCode toShow='number-field'/>

## Anatomy
```
import { NumberField, NumberInput } from "@/components/ui/number-field"
import { Label, Description, FieldError } from "@/components/ui/field"

<NumberField>
  <Label/>
  <NumberInput />
  <Description />
  <FieldError />
</NumberField>
```

## Controlled
You can use the number field as a controlled component by managing its state externally.
<How minW60 toUse="forms/number-field/number-field-controlled-demo" />

## Uncontrolled
Like other fields, the search field can be controlled by managing its value through the `defaultValue` prop.
<How toUse="forms/number-field/number-field-uncontrolled-demo" />

## Validation
The field is in an error state, usually caused by invalid input. Try submitting the form without filling it out to see the error state in action.
<How minW60 toUse="forms/number-field/number-field-invalid-demo" />

## Disabled
The field is disabled and cannot be interacted with.
<How minW60 toUse="forms/number-field/number-field-disabled-demo" />
